Archivos, enlaces, y cualquier cosa que deseamos añadir que requiere ocupar menos espacio. Los desplegables son una solución y así lo ve American Peroxide que desea añadir las etiquetas en un desplegable.



La forma de crear este desplegable es muy sencilla, lo explicamos en esta entrada como recurso para añadir enlaces.

El resultado será diferente según mostremos las categorías en nuestro blog.
Por ejemplo yo tengo las etiquetas de manera que al clicar en una categoría se muestran los títulos con la opción de expandir la entrada sin salir de la página.
Otros blogs las tienen de forma que al clicar se muestran todas las entradas completas.




<select class="combobox" name="SiteMap" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1">
<option selected>Texto inicial</option>
<option value="url-de-la-pagina">texto visible </option>
<option value="url-de-la-pagina">texto visible </option>
</select>


Lo que haremos será añadir el texto con el nombre de la etiqueta y la url que nos llevará a la página donde todas las entradas con dicha etiqueta son mostradas.
Para conseguir la url bastará con clicar en una etiqueta de nuestro blog y copiar la dirección que aparece en ese momento en la barra del navegador.

Una vez tenemos el desplegable terminado ya podemos guardar los cambios.
Podemos agregarlo a nuestra sidebar si añadimos el código en Página de diseño/añadir un elemento de página/HTMLjavascript

Personalizar nuestro desplegable sería el último paso lo podemos hacer agregando unas líneas de código a los CSS por ejemplo justo antes de ]]></b:skin>

.combobox {
background:#000;
border: 2px solid#cccccc;
font-size: small;
color: #ffffff;
}



Naturalmente los colores los podéis modificar a vuestro gusto !Suerte¡
alida

Amiga gema gracias, cuando pueda lo pondré, hoy me sale error en mi pagina ;) me sale error, y de paso no se me actualizo el post de hoy, no puedo ascender a la plantilla etc. y de paso me sale propaganda uffsss
Un abrazo

Responder
Gem@

Hola Alida, ayer yo también tenía problemas, accedía al blog pero era lentísima la carga cuando normalmente no lo es.
Puede que sean prroblemas de Blogger, lo de la publicidad es otra historia, si te aparece al visionar el blog mira que es lo último que agregaste, algún botón de enlace, algún accesorio de los que te proporcionan el código para añadirlo. Muchas veces en el código va "escondida" la publicidad.
Ya me dirás se lo solucionas, de todas formas voy a visitarte para ver si me pasa lo mismo ;)

Responder
Yaritza

Hola Gema!
me a gustado mucho tu blog, esta buenisimo.
visita el mio, por si acaso te gusta :)

Responder
Gem@

Hola Yaritza bienvenida me encantó tu blog de animales.
A buen seguro que te visitaré para ver tus post ;)

Responder
Muniatto

Nada, Felices Fiesta primero que nada, me ha gustado mucho esto de las etiquetas, ya lo he utilizado en mi bloc, facil y ahorra espacio,

Responder
ActualidadG

hola que tal , como siempre tus consejos y tips muy utiles , ademas muy efectivos , me gustaria saber como hacer esoso menos para los iconos de directorios y rank y demas , me gustan para tener mas espacio gracias ...

Responder
Gem@

Saludos ActualidadG si te refieras a la caja contenedora de mis directorios y enlaces puedes ver como hacerlo aquí.
También puedes probar de esta otra manera.
Suerte ;)

Responder
Gem@

Gracias Eusebi felices fiestas para ti también ;)

Responder
Pablo

Esta guapo para agrupar información gracias y una pregunta se podría poner imágenes??

Responder
Gem@

Puedes hacerlo agregando al CSS antes de ]]><b:skin> lo siguiente:

.combobox{
background: #00FFFF;
background-image:url('aquí-url-de-la-imagen');
background-repeat:no-repeat;
padding-left:10px;
border: solid 1px;
border-color: #000000;
}

Responder
Pablo

Sabes de todo muchas gracias Gema :)

Responder
Fátima Rodríguez

Hola,

Uso una plantilla clásica para blogger clásico y no tengo mucha idea. Quisiera que en mi blog apareciera etiquetas o nube de tags, pero las únicas opciones que encontré por la red es para blogger beta la herramienta "nube de tags". Sabes otro modo (código html, javasript..) para añadir "etiquetas o categorias" a mi blog?

Gracias por toda la info que tienes en tu blog a los principiantes nos viene de perlas

Saludos

Responder
hasbarah

Hola Gem@ Felices Pascuas!!!

Como todos tus trucos quedó genial!
Habría alguna posibilidad de implementar algo para que se vea el fondo en color negro o transparente, porque mi blog tiene color negro con las letras blancas.
Intenté hacerle algunas modificaciones a un código que me diste para que se viera con fondo negro el traductor de idiomas pero no funcionó.

Un millón de gracias.
Gabriela

Ah! Hace poco te pegué un grito de help pero luego borré el comentario. Había problemas de conexión con blogger y luego de hacer unos cambios me dejaba ver solo la vista previa pero no tenía acceso al blog. Me asusté pensé que había perdido todo. En una hora se solucionó solo (me tranquilicé porque quise entrar de nuevo a tu blog y tambien daba error)

Responder
hasbarah

Gema@ querida!!!
Gracias a tu código sobre el traductor lo logreeeeeee!!!!
No leas el mensaje anterior (aunque capaz que ya es tarde).
Gracias Diosa!!!
Yupiiiii, yay!
Besos.
Gaby

Responder
Gem@

Hasbarah vi en mi correo el comentario que más tarde eliminaste, te hice una visita y como vi que todo estaba bien por eso no contesté.

En este último fuiste más rápida que yo, y tu comentario me dio la idea de actualizar este, asi que mil gracias ;)

Responder
Jesy2474

Gema muchas gracias por los códigos, todo me funcionó de maravilla, y ya mi glog no se ve con esa lista kilometria de enlaces, asi quería verlo, si deseas ver como que quedo estas invitada:
http://jesy2474.blogspot.com/
los puse en la columna lateral derecha.
Saludos y que tengas una linda semana al lado de tus seres amados. Saludos desde Costa Rica

Responder
Gem@

Hola JESY ha quedado de lujo y muy bien integrado al blog :)
!Te felicito¡

Responder
Xoxe Mª "Olano"

Gema eres fantastica gracias a ti voy mejorando mi blog,aunque algunas cosas se resisten gracias y un saludo.Olano

Responder
BtheBlog

Gema tengo una duda yo agregue las etiquetas pero como widget si quiero cambiar el color pero unicamente de las etiquetas porque puedo hacerlo desde diseño colores pero me cambia de todos los enlaces como debo hacerlo?

Responder
Gem@

Gracias Xoxe siento ver tu comentario con tanto retraso ;)

BtheBlog para cambiar el color únicamente de las etiquetas hay que crear unos estilos, lo que hacemos es buscar la id de las etiquetas.
Ve a plantilla sin expandirla y busca:
<div id='sidebar-wrapper'>
Justo debajo verás todos los widgets de tu sidebar, debe haber uno que diga "Etiquetas"
Sería algo así:
<b:widget id='Label1' locked='false' title='ETIQUETAS' type='Label'/>

La id de las etiquetas es Label1 así que vamos justo antes de ]]></b:skin> y pegamos lo siguiente:

.Label1 {
background: #00FFFF;
padding-left:10px;
border: solid 1px;
border-color: #000000;
}

Ya me dices si te resulta ;)

Responder
BtheBlog

Muchas gracias gema, creo tener un error en el id de la etiqueta aparece locked= false yo he cambiado locked= true y probado tambien con locked= yes y aplicado el codigo aun asi no me da que puede seR?

Responder
Unknown

hola gem@.ya tengo resuelto lo anterior...parece que vengo a ti en plan salvataje. ahora se trata de cómo hacer un título desplegable para esconder los banners del directorio como el que tienes tú:
Directorios
Enlaces,
Estadísticas

Lo necesiTo URGENTE para http://paraninosconcabeza.blogspot.com. GRACIASSSS

Responder
Gem@

yz lk precisamente cambie ese gadget hace unos días lo tenía añadido de esta forma:
http://gemablog-.blogspot.com/2007/08/para-implementarlo-debemos-descargar-el.html
Ahora lo cambié por otro :)

Responder
Unknown

no sé si me explico bien. lo que me gustaría es poner los BANNERS tal y como tú los tienes debajo de DIRECTORIO. No las etiquetas sino los banners, que si vas a http://paraninosconcabeza.blogspot.com verás que ocupan 1/4 de página...

Responder
Gem@

yz Te explicaste bien lk y te respondí en el otro comentario de las etiquetas, hay forma de ocultar el contenido del gatget (el que sea) y añadirle ese efecto deslizante que ves en mis archivos y directorios,
Te decía que no lo tengo explicado, es muy largo para un comentario pero tengo esa entrada pendiente y que Rosa explicó algo por el estilo, creo que era "Efecto deslizante en cualquier gadget"

Responder
kaasy

hola de nuevo!! =3 :)
estaba buscando recursos y como no aparecio tu blog xD
tengo un problema respecto a cambiar los colores.
Como pones en la entrada
haces primero el gadget con el primer codigo k tu nos proporcionas, y al haberlo hecho puedes cambiarle los colores en la "Edición de HTML" me equivoco?
bueno pues voy alli, cojo para probar el codigo de color que pones como ejemplo y lo pongo delante de ]]> pero al guardarlo no aparece... :O he de añadir algun otro codigo al gadget?
si no haog nada mal y no sabes k puede ocurrir te puedo pasar el codigo de mi plantilla ^^
Gracias~ Bye~~!!

Responder
Gem@

:: kaasy es así como explicas, estuve probando y no hay ningún error en la entrada, si me dices donde lo tienes añadido lo miro ;)

Responder
kaasy

:D estuve cambiando lo que tenia k poner y salio... xDDD
siento haberte hecho perder el tiempo u.u
jeje te hago otra pregunta xD
hay alguna manera de que cambie la apariencia de la caja?
me refiero a k sea de otra manera x ejemplo circular xD
y la flecha que aparece hay forma de que cambie de color??

Responder
kaasy

siento el doble post pero me surgio otra duda :$
para cambiar el borde de la ima que hay que poner?

Responder
Gem@

:: La flecha creo que no se puede cambiar el tipo de borde hay algunas entradas con opciones que pueden orientarte, mira en el buscador con la palabra "bordes" ;)

Responder
kaasy

me referia tambien al color del borde, como tu, que pusiste el borde rojo ^^
gracias por la info =3

Responder
Gem@

:: El color del borde se cambia en border: 2px solid#cccccc; ;)

Responder
kaasy

o.O no me cambia, ni con el tamaño ni el color u.u

Responder
Gem@

:: Si me dices donde lo has añadido miro ese error :S

Responder
kaasy

el blog es este
http://merciful-death.blogspot.com/

si lo pongo justo antes del skin no funciona el color de fondo ni de letra, funciona si lo pongo el otro sitio del CSS
supongo k debe ser problema de mi ordenador...
xk sino no me lo explico @.@

Responder
kaasy

ya no te preocupes estoy en otro lugar y funciona perfectamente. Debia ser de mi ordenador u.u
Gracias de todas formas!! =D

Responder
Gem@

:: Pues no lo veo añadido en tu blog :S

Responder
kaasy

O.O si k esta eso lo puedo ver O.O
seria k cuando lo viste lo habia quitado o algo o.O

Responder
Gem@

:: Debe ser eso :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top